<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<div class="screenModal-common">
			<div @click="modeShow = 'dataSource'" class="screenModal-common-le screenModal-common-list" :class="{'screenModal-common-list-hover':modeShow=='dataSource'}">
				<div v-if="modeShow=='dataSource'" class="screenModal-checked"><rx-icon-show class="screenModal-checked-icon" icon="icon-linedui"></rx-icon-show></div>
				<img src="@img/Datasource.png"/>
				<span>{{i18n('form.dataSource','数据源')}}</span>
			</div>
			<div @click="modeShow = 'interface'" class="screenModal-common-ri screenModal-common-list" :class="{'screenModal-common-list-hover':modeShow=='interface'}">
				<div v-if="modeShow=='interface'" class="screenModal-checked"><rx-icon-show class="screenModal-checked-icon" icon="icon-linedui"></rx-icon-show></div>
				<img src="@img/api.png"/>
				<span>{{i18n('form.interface','接口')}}</span>
			</div>
		</div>
	</rx-dialog>
</template>

<script>
import {Util,RxDialog} from '@lowcode/jpaas-base-lib';

export default {
	name: "ScreenModal",
  components:{
    RxDialog
  },
	props:{
		destroy: {
			type: Function
		},
		mode:{
			type: String,
			default: ""
		},
	},
	data(){
		return{
			modeShow:this.mode
		}
	},
	mounted() {
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"screenLang",key);
		},
		handleSubmit() {
			Util.closeWindow(this,"ok",this.modeShow)
		},
		cancel() {
			Util.closeWindow(this,"cancel")
		},
	}
}
</script>

<style scoped>
.screenModal-common{
	display: flex;
	padding-top: 50px;
}
.screenModal-common-list{
	width: 244px;
	height: 250px;
	border-radius: 4px;
	border: solid 1px #dedede;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.screenModal-checked{
	position: absolute;
	top: 0px;
	right: 0px;
	height:20px;
	width: 20px;
	border:20px solid;
	border-color:#1890ff  #1890ff transparent  transparent ;
}
.screenModal-checked-icon{
	display: block;
	margin-top: -15px;
    color: white!important;
}
.screenModal-common-list span{
	font-size: 16px;
	color: #333333;
}
.screenModal-common-list:hover{
	border: solid 1px #1890ff;
}
.screenModal-common-list-hover{
	border: solid 1px #1890ff;
}
.screenModal-common-le{
	margin-left: 100px;
}
.screenModal-common-ri{
	margin-left: 64px;
}
</style>
